說明

在選擇剪下時，我們可以建立一個新的 canvas來建立我們所剪下的內容

  /**
   * 滑鼠點下畫布
   */
  const handleMouseDown = (event: any) => {
   ....
      case "select":
        createCanvas(point);
        break;
      default:
        break;
    }
  };

/** 建立選擇的 canvas */
  const createCanvas = (point: any, ctx) => {
    const div = document.createElement("div");
    div.style.position = "absolute";
    div.style.left = point?.x + "px";
    div.style.top = point?.y + "px";
    div.style.width = 200 + "px";
    div.style.height = 200 + "px";
    div.style.zIndex = "10";
    div.style.border = `2px dashed #999`;
    const b = document.createElement("canvas");
    b.width = 200;
    b.height = 200;
    div.appendChild(b);
    div.style.cursor = `url(${moveIcon}) 8 8, move`;
    canvasWrapRef.current.appendChild(div);

    let dragFlag = false;
    let x = 0,
      y = 0;

// 可任意移動
    div.onmousedown = (e) => {
      e = e || window.event;
      x = e.clientX - div.offsetLeft;
      y = e.clientY - div.offsetTop;
      dragFlag = true;
    };

    div.onmousemove = (e) => {
      if (dragFlag) {
        e = e || window.event;
        div.style.left = e.clientX - x + "px";
        div.style.top = e.clientY - y + "px";
      }
    };

    div.onmouseup = function (e) {
      dragFlag = false;
    };
  };

思考

但目前上面只寫到了建立，重點的剪下沒有做到！
這時又需要 canvas 的 API 了
來到今天的學習重點

getImageData

CanvasRenderingContext2D.getImageData() getImageData()返回一個ImageData對象，該 對象表示畫布指定部分的底層像素數據。
此方法不受畫布變換矩陣的影響。如果指定的矩形超出畫布邊界，則畫布外的像素在返回的對ImageData像中為透明黑色。

putImageData

CanvasRenderingContext2D.putImageData() Canvas 2D API 的 方法將來自給定ImageData對象的數據繪製到畫布上。如果提供了臟矩形，則僅繪製該矩形中的像素。此方法不受畫布變換矩陣的影響。畫布邊界，則畫布外的像素在返回的對ImageData像中為透明黑色。

所以只需要在剛才的 createCanvas 底下補上以下的程式碼

 let imageData = ctx.getImageData(point.x, point.y, b.width, b.height);
    const ctx_b = b.getContext("2d");
    ctx_b && ctx_b.putImageData(imageData, 0, 0);
    ctx.clearRect(point.x, point.y, b.width, b.height);

b->> 剛才所新建立的 canvas
ctx ->> 原先的 canvas

查看效果